<template>
  <div class="container">
      <a-form
    :model="formState"
    name="basic"
     :label-col="{ span: 10 }"
    :wrapper-col="{ span:14 }"

    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="banner滚动时间"
      name="value"
     
      :rules="[{ required: true, message: '请输入banner轮播时间!' }]"
    >
      <a-input v-model:value="formState.value" @change="changevalue"  suffix="秒" placeholder="请输入banner轮播时间" />
    </a-form-item>

   

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-form-item>
  </a-form>
  </div>
</template>
<script>
import { defineComponent, reactive ,onMounted} from 'vue';
 import { message,Modal } from 'ant-design-vue'
import {
	setBanner,
    getBanner
} from '/@/api/app.js'
export default defineComponent({
  setup() {
    const formState = reactive({
      value: '',
    
    });
    const changevalue =(e)=>{
        const reg = /^-?\d*(\.\d*)?$/;
       var val=e.target.value;
      if (!isNaN(+val) && reg.test(val) &&val!=0) {
        formState.value=val
      } else {
        formState.value=null
      }
      
    }
    const onFinish = values => {
        const {value}=values
   
       setBanner({
           time:value
       })
       .then((res)=>{
          message.success('设置成功')
       })
       .catch(()=>{

       })
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
   onMounted(()=>{
       getBanner()
        .then((res)=>{
            const {result} = res;
        formState.value=result
       })
       .catch(()=>{

       })
   })
    return {
      formState,
      onFinish,
      onFinishFailed,
      changevalue
    };
  },

});
</script>
<style scoped>
 .container{
     width:20%;
     position: relative;
     top:20%;
     margin:0 auto;
     text-align: center;
 }
</style>